import React, { Component } from 'react';
import { ListBox } from './style'
import { withRouter } from 'react-router-dom'

@withRouter
class List extends Component {
  render() {
    return (
      <ListBox>
        <h1>精品好菜</h1>
        <div>
          {
            this.props.data.length > 0
              ?
              this.props.data.map((item, index) => (
                <dl key={'list' + index}>
                  <dt onClick={() => {
                    console.log(item.id);
                    console.log(this.props.history);
                  }}>
                    <img src={item.img} alt="" />
                  </dt>
                  <dd>
                    <h3>{item.name}</h3>
                    <p>1000浏览  2000收藏</p>
                  </dd>
                </dl>
              ))
              :
              <dl>
                <dt>提示</dt>
                <dd>数据玩命加载中...</dd>
              </dl>
          }
        </div>
      </ListBox>
    );
  }
}

export default List;
